<div class="container operate">
  <i nz-icon nzType="profile" nzTheme="outline" class="card-title"></i>
  <span class="card-title">数据列表</span>
  <button nz-button style="float: right;" nzSize="small" (click)="handleAdd()"> 添加 </button>
</div>

<div class="table-container">
  <nz-table #productAttrCateList nzSize="small" [nzData]="cateoryList" [nzFrontPagination]="false"
    [nzShowPagination]="false" nzBordered [nzLoading]="tableLoading">
    <thead>
      <tr>
        <th nzAlign="center" nzWidth="6%">编号</th>
        <th nzAlign="center">类型名称</th>
        <th nzAlign="center" nzWidth="6%">属性数量</th>
        <th nzAlign="center" nzWidth="6%">参数数量</th>
        <th nzAlign="center" nzWidth="15%" style="min-width: 250px;">设置</th>
        <th nzAlign="center" nzWidth="12%" style="min-width: 200px;">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of productAttrCateList.data">
        <td nzAlign="center">{{data.id}}</td>
        <td nzAlign="center">{{data.name}}</td>
        <td nzAlign="center">{{data.attributeCount}}</td>
        <td nzAlign="center">{{data.paramCount}}</td>
        <td nzAlign="center">
          <button nz-button nzSize="small" class="operateButton" (click)="handleAttribute(data.id, data.name)">属性列表</button>
          <button nz-button nzSize="small" class="operateButton" (click)="handleParam(data.id, data.name)">参数列表</button>
        </td>
        <td nzAlign="center">
          <button nz-button nzSize="small" class="operateButton" (click)="handleUpdate(data.id, data.name)">编辑</button>
          <button nz-button nzSize="small" nzDanger nzType="primary" class="operateButton"
            (click)="handleDelete(data.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>

<div class="pagination-container">
  <nz-pagination [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" [nzTotal]="total"
    [nzPageSizeOptions]="[10, 15,20]" nzShowQuickJumper nzShowSizeChanger [nzShowTotal]="totalTemplate"
    (nzPageIndexChange)="handlePageIndexChange()" (nzPageSizeChange)="handlePageSizeChange()">
  </nz-pagination>
  <ng-template #totalTemplate let-total>共{{total}}条</ng-template>
</div>

<nz-modal [nzVisible]="addModalVisible" nzTitle="添加类型" (nzOnCancel)="handleAddModalCancel()"
  (nzOnOk)="handleAddModalOk()">
  <form nz-form [formGroup]="addForm">
    <nz-form-item>
      <nz-form-label nzRequired nzFor="name">类型名称</nz-form-label>
      <nz-form-control nzErrorTip="请输入类型名称">
        <input nz-input formControlName="name" id="name" />
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>
